.micro-container {
	width: 100%;
	height: 700px;
}

.micro-body {
	height: 100%;
	width: calc(100% - 337px);
	float: left;
}

.title {
	width: calc(100% - 18px);
	height: 15px;
	background: #98a2ff;
	line-height: 15px;
	color: white;
}

.micro-side,
.micro-tools,
.title {
	border: 1px solid #ff5500;
	padding: 8px;
}

.micro-tools-box {
	margin-right: 10px;
	height: 30px;
	width: auto;
	float: left;
}

.micro-tools-box-click {
	background: #d2d1d7;
	border-right: 2px solid #483d7f;
	border-bottom: 2px solid #483d7f;
	box-shadow: 2px 2px 5px #483d7f;
}

.micro-tools {
	width: 100%;
	height: 30px;
	overflow-x: auto;
	overflow-y: hidden;
}

.micro-canvas {
	height: calc(100% - 30px);
	width: calc(100% + 16px);
	overflow-x: auto;
	overflow-y: auto;
	border: 1px solid #ff5500;
}

.beautify-scroll::-webkit-scrollbar {
	width: 5px;
	height: 1px;
}

.beautify-scroll::-webkit-scrollbar-thumb {
	border-radius: 5px;
	background-color: skyblue;
	background-image: -webkit-linear-gradient(45deg,
		rgba(255, 255, 255, 0.2) 25%,
		transparent 25%,
		transparent 50%,
		rgba(255, 255, 255, 0.2) 50%,
		rgba(255, 255, 255, 0.2) 75%,
		transparent 75%,
		transparent);
}

.beautify-scroll::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
	background: #ededed;
	border-radius: 5px;
}

.micro-side {
	height: calc(100% + 2px);
	width: 300px;
	float: right;
}

.micro-circle,
.micro-circle-end,
.micro-circle-start,
.micro-line,
.micro-square,
.micro-square-circularize,
.micro-square-link {
	display: inline-block;
}

.micro-circle:hover,
.micro-line:hover,
.micro-square:hover,
.micro-square-circularize:hover,
.micro-square-link:hover,
.micro-circle-start:hover,
.micro-circle-end:hover {
	cursor: default;
}

.micro-square {
	width: 80px;
	height: 30px;
	background-color: #55aaff;
	color: white;
	line-height: 30px;
}

.micro-square span {
	position: absolute;
}

.micro-circle {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	text-align: center;
	line-height: 30px;
}

.micro-circle-start {
	background-color: #42c862;
}

.micro-circle-end {
	background-color: #ff1870;
}

.micro-line {
	position: relative;
	width: 30px;
	height: 2px;
	background-color: black;
	transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	-o-transform: rotate(45deg);
}

.micro-attribute-headline {
	border-radius: 2px;
	text-align: center;
	font-size: 1.2rem;
	background: #6697ff;
	padding-top: 5px;
	padding-bottom: 5px;
	color: #fff;
}

.micro-side input {
	width: calc(100% - 6px);
	height: 30px;
	outline: none;
	border-radius: 2px;
	border: 1px solid #aaaaff;
	margin-top: 5px;
	margin-bottom: 5px;
}

.micro-inp-attr-del {
	background: rgba(255, 78, 44, 0.3);
	color: white;
}

.micro-inp-attr-save {
	background: rgba(5, 186, 20, 0.3);
	color: white;
}

.micro-inp-attr-del:hover {
	background: rgba(255, 78, 44, 1);
}

.micro-inp-attr-save:hover {
	background: rgba(5, 186, 20, 1);
}

.micro-display-none {
	display: none;
}

.paint-tools {
	width: 60%;
	height: 100%;
	float: left;
}

.function-tools {
	width: 40%;
	height: 100%;
	float: left;
	text-align: right;
}

.micro-inp-imp,
.micro-inp-add,
.micro-inp-exp,
.micro-inp-del,
.micro-inp-reset,
.micro-inp-save {
	width: 50px;
	height: 100%;
	outline: none;
	border-radius: 5px;
	border: 0;
	margin-left: 5px;
	color: white;
}

.micro-inp-imp:hover,
.micro-inp-add:hover,
.micro-inp-exp:hover,
.micro-inp-del:hover,
.micro-inp-reset:hover,
.micro-inp-save:hover {
	transform: scale(1.1);
}

.micro-inp-add {
	background: rgba(5, 186, 20, 1);
}

.micro-inp-imp {
	background: rgba(85, 170, 255, 1.0);
}

.micro-inp-exp {
	background: rgba(255, 135, 14, 1.0);
}

.micro-inp-del {
	background: rgba(255, 76, 17, 1.0);
}

.micro-inp-reset {
	background: rgba(255, 122, 82, 1.0);
}

.micro-inp-save {
	background: rgba(85, 170, 255, 1.0);
}

.dialog-1 {
	position: absolute;
	width: 200px;
	height: 210px;
	border-radius: 5px;
	left: 50%;
	top: 50%;
	margin: -150px 0 0 -100px;
	z-index: 999;
}

.dialog-1-header {
	text-align: left;
	padding-left: 10px;
	height: 30px;
	line-height: 30px;
	width: calc(100% - 10px);
	background: #65a3ff;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	color: white;
}

.dialog-1-header:hover {
	cursor: all-scroll;
}

.dialog-1-close {
	display: inline-block;
	float: right;
	padding-right: 5px;
	font-size: 1.5rem;
}

.dialog-1-close:hover {
	cursor: default;
	color: red;
}

.dialog-1-body {
	text-align: center;
	height: 110px;
	padding: 20px 10px;
	width: calc(100% - 20px);
	background: #e4ecff;
	color: #696969;
}

.dialog-1-footer {
	height: 30px;
	width: 100%;
	background: #e4ecff;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

.dialog-1-footer input {
	width: 35%;
	margin-left: 10%;
	border: none;
	border-radius: 3px;
	outline: none;
	color: white;
}

.footer-cancel {
	background: #aaaaff;
}

.footer-confirm {
	background: #05bb20;
}

.footer-cancel:hover,
.footer-confirm:hover {
	transform: scale(1.1);
}

.dialog-1-info {
	background: #55AAFF;
}

.dialog-1-warn {
	background: #ff9513;
}

.dialog-1-error {
	background: #ff5703;
}

.dialog-1-confirm {
	background: #aaaaff;
}

.dialog-1-form {
	background: #52baff;
}

.mf-readonly {
	background: #ebebeb;
}

.mf-tip {
	width: 500px;
	height: 40px;
	border-radius: 5px;
	text-align: center;
	line-height: 40px;
	color: #696969;
	background: #e4ecff;
	position: absolute;
	z-index: 9999;
}

.mf-tip:hover {
	cursor: default;
}

.mf-tip-topcenter {
	top: 5px;
	left: calc(50% - 250px);
}

.mf-tip-topleft {
	top: 5px;
	left: 20px;
}

.mf-tip-topright {
	top: 5px;
	right: 20px;
}

.mf-tip-bottomleft {
	bottom: 5px;
	left: 20px;
}

.mf-tip-bottomright {
	bottom: 5px;
	right: 20px;
}

.mf-tip-close {
	position: absolute;
	z-index: 9999;
	top: -10px;
	left: 485px;
}

.mf-tip-close:hover {
	color: red;
}
